<template>
  <div class="invitation-ranking">
    <a-card style="margin-top: 20px">
      <div slot="title" class="title-box">
        <div>
          <span class="title">本会邀约排行</span>
          <span class="desc">仅是本组织小程序用户邀约排行</span>
        </div>
        <div>
          <a-input-search
            v-model="queryData.keyWord"
            placeholder="搜索邀约人"
            style="width: 200px"
            allow-clear
            @search="refresh"
          />
          <a-button type="link" @click="handleExport">
            导出数据
          </a-button>
        </div>
      </div>
      <s-table size="default" ref="table" rowKey="id" :columns="columns" :data="loadData">
        <!-- 序号 -->
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <div slot="name" slot-scope="text, record" class="name-img-box">
          <viewer class="viewer" ref="viewer" :images="[record.avatar]">
            <img
              v-if="record.avatar"
              :src="record.avatar"
              class="viewer-img"
              style="width:40px;height:40px;border-radius: 50%;"
            />
            <img v-else src="@/assets/icons/default_userIcon.png" style="width:40px;height:40px;border-radius: 50%;" />
          </viewer>
          <div class="name-box">
            <span>{{ text }}</span>
            <div>{{ record.levelName }}</div>
          </div>
        </div>
        <span
          slot="browsePeopleNum"
          slot-scope="text, record"
          style="color: #2878FF;cursor: pointer;"
          @click="toInvitationDetail(record.id, 'browsingHistory')"
        >
          {{ text }}
        </span>
        <span
          slot="registerNum"
          slot-scope="text, record"
          style="color: #2878FF;cursor: pointer;"
          @click="toInvitationDetail(record.id, 'registrationList')"
        >
          {{ text }}
        </span>
        <span slot="payMoney" slot-scope="text">
          {{ formatMoney({ money: text, isShowFree: false }) }}
        </span>
        <span slot="refundMoney" slot-scope="text">
          {{ formatMoney({ money: text, isShowFree: false }) }}
        </span>
      </s-table>
    </a-card>
  </div>
</template>

<script>
import { STable } from '@/components'
import { accMul, formatMoney } from '@/utils/number'
import { inviteShareStatisticsList, exportStatisticsExcel } from '@/api/activity/activity'
import { resolveUrl, mimeMap } from '@/utils/download'

export default {
  components: {
    STable
  },
  props: {
    isExistJointly: {
      type: Boolean,
      defualt: false
    }
  },
  data() {
    return {
      showTable: false,
      queryData: {
        activityId: undefined,
        orderColumnList: [],
        keyWord: '',
        current: 1,
        size: 10
      },
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: '80px'
        },
        { title: '邀约人', width: '250px', dataIndex: 'name', scopedSlots: { customRender: 'name' } },
        {
          title: '带来浏览人数',
          dataIndex: 'browsePeopleNum',
          key: 'browsePeopleNum',
          ellipsis: true,
          sorter: true,
          scopedSlots: { customRender: 'browsePeopleNum' },
          sortDirections: ['descend', 'ascend']
        },
        { title: '带来浏览次数', dataIndex: 'browseNum', ellipsis: true },
        {
          title: '带来报名成功人数',
          dataIndex: 'registerNum',
          ellipsis: true,
          sorter: true,
          scopedSlots: { customRender: 'registerNum' },
          sortDirections: ['descend', 'ascend']
        },

        { title: '带来费用总额', dataIndex: 'payMoney', ellipsis: true, scopedSlots: { customRender: 'payMoney' } },
        { title: '带来取消报名数', dataIndex: 'refundCount', ellipsis: true },
        { title: '带来退款总额', dataIndex: 'refundMoney', ellipsis: true, scopedSlots: { customRender: 'refundMoney' } }
      ],
      pagination: {
        current: 1,
        size: 10
      },
      loadData: parameter => {
        console.log('parameter', parameter);
        
        this.queryData.activityId = this.$route.query.activityId
        this.queryData.current = parameter.current
        this.queryData.size = parameter.pageSize
        if (parameter.sortField) {
          this.queryData.orderColumnList = [{ columns: parameter.sortField, asc: parameter.sortOrder === 'asc' }]
        }
        return inviteShareStatisticsList(this.queryData).then(res => {
          return res
        })
      }
    }
  },
  methods: {
    accMul,
    formatMoney,
    refresh() {
      this.$refs.table.refresh(true)
    },
    async handleExport() {
      const res = await exportStatisticsExcel(this.queryData)
      resolveUrl(res, mimeMap.xlsx, '本会邀约排行')
    },
    toInvitationDetail(inviteAppUserInfoId, tabTitleKey) {
      this.$router.push({
        name: 'invitationDetail',
        query: {
          activityId: this.$route.query.activityId,
          inviteAppUserInfoId,
          tabTitleKey
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.invitation-ranking {
  .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      color: #1d2129;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
    }
    .desc {
      color: #86909c;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      margin-left: 4px;
    }
  }
  .name-img-box {
    display: flex;
    align-items: center;
    gap: 8px;
    .name-box {
      display: flex;
      align-items: center;
      gap: 8px;
      span {
        color: #1d2129;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
      }
      > div {
        padding: 0px 8px;
        border-radius: 2px;
        background: #e8f7ff;
        color: #3491fa;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
      }
    }
  }
}
</style>
